<template>
	<div class="con-z">
		<div class="right">
			<div class="right-top">
				<el-page-header @back="goBack" content="配置管理">
				</el-page-header>
			</div>
			<div class="right-bto">
				<div style="margin-bottom: 20px;">
					 <el-button type="primary" @click="add">添加</el-button>
				</div>
				
				<div class="main">
					
				<el-table :data="tableData" height="500" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
						:cell-style="{'text-align':'center'}" border>
						<el-table-column prop="id" label="ID" width="80"></el-table-column>
					<el-table-column prop="name" label="模式名称" min-width="80"></el-table-column>
				
						
						<el-table-column label="图片数量" prop="image_num"  >
						</el-table-column>
					<el-table-column label="操作" min-width="200">
						<template slot-scope="scope">
							<el-button type="warning" @click="add(scope.row)">编辑</el-button>
							<el-button type="danger" @click="clear(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				</div>
			
			</div>
			<el-dialog :title="form.id?'编辑':'添加'" :visible.sync="dialogVisible" width="40%">
				<span>
					<el-form ref="form"  :model="form" label-width="140px"  :inline="false">
							<el-form-item label="模板" required  >
								 <el-input   v-model="form.name" clearable style="width: 200px;"   ></el-input>
							</el-form-item>	
							<el-form-item label="图片最少发布数" required  >
								 <el-input   v-model.number="form.image_num" clearable style="width: 200px;"   ></el-input>
							</el-form-item>	
							 
					</el-form>
				</span> 
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import setting from '@/config/setting';
	export default{
		data(){
			return{
				product_id:'', 
				form:{
				
				},
				msglist:[
					{name:'模式管理',id:0},
				],
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				tableData:[],
			}
		},
		mounted(){
			this.getlist()
		},
		methods:{
			add(data){
				if(data.id){
					console.log(111)
					this.$set(this,'form',data)
				}else{
					console.log(222)
					this.$set(this,'form',{
						product_id:this.product_id 
					})
				}
				
				this.dialogVisible = true
				console.log(this.form)
			
			},
			submit(){
			
				this.$http.post(`/back/mode/edit`,
					this.form
				).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message({
						  type: 'success',
						  message: res.data.msg
						}); 
							this.dialogVisible = false
						this.getlist()
					}
					
				})
			},
			clear(data){
				this.$confirm('正在删除该模式, 是否继续?', '提示', {
					         confirmButtonText: '确定',
					         cancelButtonText: '取消',
					         type: 'warning'
				 }).then(() => {
							   
												this.$http.post('/back/mode/del',{
													id:data.id,
												}).then(res => {
													if (res.data.code == 1) {
														this.$message({
															message: res.data.msg,
															type: 'success'
														});
														this.getlist()
													} else {
														this.$message.error(res.data.msg);
													}
												})
					         
					       }).catch(() => {
					         this.$message({
					           type: 'info',
					           message: '已取消'
					         });          
					       });
				
			},
			getlist(){
			this.product_id =this.$route.query.id
				this.$http.get(`/back/mode/list?product_id=${this.product_id }`).then(res => {
					console.log(res)
					this.tableData = res.data.data
				})
			},
			handleChange(item){
				this.$router.push("/moshiguanli/tupianxuanze?name=" + item.name + '&id=' + item.id +'&product_id=' + this.product_id)
			},
			handlefabu(item){
				this.$confirm('此操作将修改线上陈展图片, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
						   
											this.$http.post('/back/mode/release',{
												id:item.id,
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消'
				         });          
				       });
			},
			goBack(){
				this.$router.go(-1)
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.con-z{
		height:100vh;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>